import React, { Component } from 'react'
// import Sun from './components/Sun'
import Alert from './components/Alert';
export class App extends Component {
  state={
    // value:'',
    // list:[]

    showAlert:false,
    list:[{
      "title":"语言",
      "children":["语言1","语言2","语言3","语言4"]
    },{
      "title":"方向",
      "children":["方向语言1","方向语言2","方向语言3","方向语言4"]
    }],
    checkList:[],
    checkIndex:0
  }

  // changeInput=(e)=>{
  //   this.setState({
  //     value:e.target.value
  //   })
  //   // console.log(e.target.value)
  // }
  // add=()=>{
  //   this.state.list.push(this.state.value)
  //   console.log(this.state.list)
  //   this.setState({
  //     value:''
  //   })
  // }
  // deletes (e) {
  //   console.log('ssss')
  //   let newArr= this.state.list.splice(e,1);
  //   this.setState({
  //     list:newArr
  //   })

  // }
  //打开
  shows=()=>{
    this.setState({
      showAlert:true
    })
  }
  //关闭
  close(){
    this.setState({
      showAlert:false
    })
  }
  //tab切换
  changTabs(index){
    this.setState({
      checkIndex:index
    })
  }
  //选择元素
  checkSpan(index){
    let son=this.state.list[this.state.checkIndex].children[index];
     console.log(son);
     let newArr=this.state.checkList;
      newArr.push(son);
    console.log(newArr)
    this.setState({
      checkList:newArr
    })
  } 

  delets(index){
    let newArr=this.state.checkList;
    newArr.splice(index,1);
    this.setState({
      checkList:newArr
    })
  }
  render() {
    const {showAlert,list,checkIndex,checkList}= this.state;
    return (
      <div>
        {/* <input type="text" value={value} onChange={(e)=>{
          this.changeInput(e)
        }}/>
        <button onClick={()=>{
          this.add()
        }}>添加</button>  
        <ul>
          <Sun list={list} deletes={this.deletes.bind(this)}></Sun>
        </ul> */}

        <button onClick={()=>{
          this.shows()
        }}>点开弹窗</button>
        <Alert showAlert={showAlert} list={list} delets={this.delets.bind(this)} checkSpan={this.checkSpan.bind(this)} checkList={checkList} checkIndex={checkIndex} close={this.close.bind(this)} changTabs={this.changTabs.bind(this)}></Alert>
      </div>
    )
  }
}

export default App